<template>
  <div class="about">
    <div>查询条件</div>
    <el-card class="box-card1">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="客户名称">
          <el-input v-model="formInline.name" placeholder="请输入" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="客户编号">
          <el-input v-model="formInline.id" placeholder="请输入" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input v-model="formInline.num" placeholder="请输入" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="客户类型">
          <el-select v-model="formInline.type" placeholder="请选择客户类型" style="width:150px">
            <el-option label="统一社会信用代码" value="shanghai"></el-option>
            <el-option label="组织机构代码" value="beijing"></el-option>
            <el-option label="其他证件类型" value="being"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="box-card2">
      <div style="margin-bottom: 20px" class="box">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

        <el-button type="danger" size="mini" class="btn1" @click="centerDialog = true">删除</el-button>
        <el-dialog title="提示" :modal-append-to-body=false :visible.sync="centerDialog" width="30%" center>
          <span>确定要删除这些信息吗</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialog = false">取 消</el-button>
            <el-button type="primary" @click="handlemultiDelete(checkedEnterpriseId)">确 定</el-button>
          </span>
        </el-dialog>
        <el-button type="primary" size="mini" @click="addEnterprise" class="btn1">添加</el-button>
      </div>
      <el-table :data="tableData" :cell-style="{padding:'1px 0'}" border style="width: 100%">
        <el-table-column fixed label="选择" width="80">
          <template slot-scope="scope">
            <el-checkbox-group v-model="checkedEnterpriseId" @change="handleCheckedEnterpriseChange">
              <el-checkbox :label="scope.row.enterpriseId"><i class="el-icon-check"></i></el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
        <el-table-column prop="enterpriseId" fixed label="企业编号" width="140">
          <template slot-scope="scope">
            <a @click="handleClick(scope.row)">{{scope.row.enterpriseId}}</a>
          </template>
        </el-table-column>
        <el-table-column prop="enterpriseName" label="企业名称" width="120">
        </el-table-column>
        <el-table-column prop="cardType" label="证件类型" width="180">
        </el-table-column>
        <el-table-column prop="enterpriseDate" label="成立日期" width="120">
        </el-table-column>
        <el-table-column prop="enterpriseId" label="证件号码" width="150">
        </el-table-column>
        <el-table-column prop="capital" label="注册资本(万)" width="100">
        </el-table-column>
        <el-table-column prop="address" label="详细地址" width="240">
        </el-table-column>
        <el-table-column prop="workes" label="职工人数" width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="centerDialogVisible = true" size="small">删除</el-button>
            <el-dialog title="提示" :modal-append-to-body=false :visible.sync="centerDialogVisible" width="30%" center>
              <span>确定要删除该条信息吗</span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleDelete(scope.row.enterpriseId)">确 定</el-button>
              </span>
            </el-dialog>
            <el-button type="text" @click="handleEdit(scope.row)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :page-size="10" :pager-count="7" layout="prev, pager, next" :total="100">
      </el-pagination>
      <!-- 分页器 -->
    </el-card>

    <!-- <el-card class="box-card3">
      <div style="margin-bottom: 20px">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        
        <el-button type="danger" size="mini" class="btn1">删除</el-button>
        <el-button type="primary" size="mini" @click="addEnterprise">添加</el-button>
      </div>
      <el-table
        :data="tableData"
        :cell-style="{padding:'1px 0'}"
        border
        style="width: 100%">
        <el-table-column
          fixed
          label="选择"
          width="80">
          <template slot-scope="scope">
            <el-checkbox-group v-model="checkedEnterprise" @change="handleCheckedEnterpriseChange">
              <el-checkbox :label="scope.row.gameId">选中</el-checkbox>
            </el-checkbox-group>
          </template>
        </el-table-column>
        <el-table-column
          prop="gameId"
          fixed
          label="企业编号"
          width="120">
          <template slot-scope="scope">
            <a @click="handleClick(scope.row.gameId)">{{scope.row.gameId}}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="province"
          label="省份"
          width="120">
        </el-table-column>
        <el-table-column
          prop="city"
          label="市区"
          width="120">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="300">
        </el-table-column>
        <el-table-column
          prop="zip"
          label="邮编"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDelete(scope.row.gameId)" size="small">删除</el-button>
            <el-button type="text" @click="handleEdit(scope.row.gameId)" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card> -->
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        formInline: {
          name: '',
          id: '',
          num: '',
          type: '',
        },
        index: '1',
        checkAll: false,
        centerDialog: false,
        centerDialogVisible: false,
        isIndeterminate: false,
        checkedEnterpriseId: [], //选择的企业编号 数组
        tableData: [],
        allEnterpriseId: [] //全部的企业编号 数组
      }
    },
    methods: {
      handleSearch() {

        let obj = this.formInline
        if (obj.name === '' && obj.id === '' && obj.num === '' && obj.type === '') {
          this.$message({
            message: '您未输入查询条件，请输入查询条件。',
            type: 'warning'
          });
        } else {
          this.$axios.post(`/api/SearchEnterpriseController/getSearchEnterprise`, this.$qs.stringify({
            enterpriseId: obj.id,
            enterpriseName: obj.name,
            cardType: obj.type,
            cardId: obj.num
          })).then(res => {
            this.tableData = res.data
            console.log(res.data)
          })

        }
      },
      handleCheckAllChange(val) { //全选
        this.checkedEnterpriseId = val ? this.allEnterpriseId : []
        this.isIndeterminate = false
      },
      handleCheckedEnterpriseChange(value) { //判断是否全选了，
        let checkedCount = value.length
        this.checkAll = checkedCount === this.allEnterpriseId.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.allEnterpriseId.length
      },
      addEnterprise() { //添加跳转
        this.$router.push('/addenterprise')
      },
      handleDelete(id) { //删除单个企业信息
        console.log(id);
        this.$axios.post(`/api/delectEnterpriseController/deleteEnterprise`, this.$qs.stringify({
          enterpriseId: id
        })).then(res => {
          console.log(res.data)
        })
        this.centerDialogVisible = false
      },
      handlemultiDelete(id) { //删除多个企业信息
        console.log(id);
        this.centerDialog = false
        if (id.length === 0) {
          this.$message({
            message: '请选择要删除的信息。',
            type: 'warning'
          });
        } else {
          // this.$axios({
          //   url: '/api/delectEnterpriseController/deleteBatchEnterprise',
          //   methods: 'post',
          //   data: JSON.stringify(id)
          // })
          console.log(typeof JSON.stringify(id))
          this.$axios.post("/api/delectEnterpriseController/deleteBatchEnterprise", this.$qs.stringify({
            enterpriseId: id
          })).then(res => {
            console.log(res.data)
          })
        }

      },
      handleClick(list) { //跳转到详情页面
        console.log(list.address);
        this.$router.push({ path: '/detail', query: { id: list.enterpriseId, type: list.cardType, num: list.cardId, capital: list.capital, peonum: list.workes, date: list.enterpriseDate, name: list.enterpriseName, address: list.address } })
      },
      handleEdit(list) {  //跳转到修改页面
        console.log(list);
        this.$router.push({ path: '/edit', query: { id: list.enterpriseId, type: list.cardType, num: list.cardId, capital: list.capital, peonum: list.workes, date: list.enterpriseDate, name: list.enterpriseName, address: list.address } })
      },
      getInformation() {
        // this.$axios(`/api/Enterprise/queryAllEnterpriseControl/${5}`).then(res => {
        //   console.log(res.data)
        // })
        // this.$axios({
        //   url: '/api/Enterprise/queryAllEnterpriseControl',
        //   methods: 'get',
        //   data: 5
        // })
        this.$axios.post('/api/Enterprise/queryAllEnterpriseControl', this.$qs.stringify({
          index: this.index
        })).then(res => {
          this.tableData = res.data
          for (let i = 0; i < this.tableData.length; i++) {
            this.allEnterpriseId.push(this.tableData[i].enterpriseId)
          }
        })
      }
    },
    mounted() {
      this.getInformation()
    },
    created() {
      this.getInformation()

      // let res = {
      //   'data': {
      //     'list': [
      //       {
      //         enterpriseId: '11111',
      //         type: '组织机构代码',
      //         num: '933566666525',
      //         capital: '2000000',
      //         peonum: '1200',
      //         date: '2016-05-02',
      //         name: '小度',
      //         address: '上海市普陀区金沙江路 1518 弄'
      //       }, {
      //         enterpriseId: '22222',
      //         type: '统一社会信用代码',
      //         num: '933566666666',
      //         capital: '3000000',
      //         peonum: '2000',
      //         date: '2016-05-04',
      //         name: '小里',
      //         address: '上海市普陀区金沙江路 1517 弄'
      //       }, {
      //         enterpriseId: '33333',
      //         type: '组织机构代码',
      //         num: '933566666888',
      //         capital: '3000000',
      //         peonum: '3000',
      //         date: '2016-05-01',
      //         name: '小华',
      //         address: '上海市普陀区金沙江路 1519 弄'
      //       }, {
      //         enterpriseId: '44444',
      //         type: '其他证件类型',
      //         num: '933566666999',
      //         capital: '5000000',
      //         peonum: '5000',
      //         date: '2016-05-03',
      //         name: '小腾',
      //         address: '上海市普陀区金沙江路 1516 弄'
      //       }
      //     ]
      //    }
      // }
      //this.tableData = res.data.list

    }
  }
</script>

<style scoped lang="scss">
  .box-card1 {
    width: 100%;

  }

  .demo-form-inline {
    margin-left: 20px;
  }

  .box {
    padding-right: 10px;

  }

  .btn1 {
    float: right;
    margin-left: 5px;
    margin-right: 5px;
  }

  .box-card2 {
    margin-top: 10px;
    margin-bottom: 10px;


  }
</style>